<template>
	<div class="mb-2 flex rounded-md overflow-hidden bg-bg-3 relative duration-300">
		<div
			class="absolute left-0 h-full z-10 w-10 flex justify-center items-center bg-bg-3 cursor-pointer app-bg-react"
			@click="onRemove">
			<base-icon v-if="!isTransition" class="text-[15px]" name="close" />
		</div>
		<div class="w-full p-2 pl-12">
			<betslip-item-single
				v-if="data.type === BettingMethod.single"
				:data="data as BetslipItemType" />
			<betslip-item-combo v-else :data="data as BetslipComboType" />
			<div class="h-[26px] flex justify-between items-center">
				<betting-odds class="text-primary text-[16px]" :value="odds" at />
				<div></div>
				<transition
					enter-active-class="animate__animated animate__fadeInLeft"
					leave-active-class="animate__animated animate__fadeOutLeft">
					<betslip-action
						v-show="betslipStore.tab !== BetslipTab.Combo"
						:data="data"
						:odds="odds" />
				</transition>
			</div>
			<transition
				enter-active-class="animate__animated animate__fadeInRight"
				leave-active-class="animate__animated animate__fadeOutRight">
				<div class="w-2 h-full absolute right-0 top-0 bg-success" v-if="isComboEnabled"></div>
			</transition>
		</div>
		<transition
			enter-active-class="animate__animated animate__fadeIn"
			leave-active-class="animate__animated animate__fadeOut"
			mode="out-in">
			<betslip-transition :status="data.status" v-if="isTransition" />
			<betslip-failed v-else-if="data.status === BetslipItemStatus.failed" />
			<betslip-item-disabled v-else-if="data.status === BetslipItemStatus.disabled" />
		</transition>
	</div>
</template>

<script lang="ts" setup>
import { computed, PropType, watch } from 'vue'
import { BaseIcon } from '@/components/base'
import { BettingOdds } from '@/components/betting'
import BetslipAction from '../betslip-action/index.vue'
import BetslipItemSingle from './betslip-item-single.vue'
import BetslipItemCombo from './betslip-item-combo.vue'
import BetslipItemDisabled from './betslip-item-disabled.vue'
import BetslipFailed from '../betslip-failed.vue'
import BetslipTransition from '../betslip-transition.vue'
import {
	BetslipBaseType,
	BetslipItemType,
	BetslipComboType,
	BetslipTab,
	BetslipItemStatus
} from '@/types'
import { BettingMethod } from '@/enums'
import { useBetslipStore, useBettingConfigStore, useMatchStore } from '@/store'
import { useBetslip } from '@/hooks'
import { getComboOddsByList } from '@/utils'

const props = defineProps({
	data: {
		type: Object as PropType<BetslipBaseType>,
		required: true
	}
})

const bettingConfigStore = useBettingConfigStore()
const matchStore = useMatchStore()
const betslipStore = useBetslipStore()

const { isTransition } = useBetslip(props.data)

const odds = computed(() => {
	if (props.data.type === BettingMethod.single) {
		const item = props.data as BetslipItemType
		const selection =
			matchStore.getSelection(item.eventId, item.marketId, item.id) || item.selection
		return betslipStore.tab === BetslipTab.Combo ? selection?.trueOdds : selection?.displayOdds
	} else {
		const data = props.data as BetslipComboType
		const selections = data?.list?.map(
			(item, index) =>
				matchStore.getSelection(item.eventId, item.marketId, item.id) ||
				(data.selections && data.selections[index])
		)

		return getComboOddsByList(selections?.map((item) => item?.trueOdds))
	}
})

const isLock = computed(() => {
	if (props.data.type === BettingMethod.single) {
		const item = props.data as BetslipItemType
		return matchStore.isBettingLock(item.eventId, item.marketId, item.id)
	} else {
		const data = props.data as BetslipComboType
		return data.selections?.some((item) =>
			matchStore.isBettingLock(item.eventId, item.marketId, item.id)
		)
	}
})

const onRemove = () => {
	if (betslipStore.tab === BetslipTab.Follow) {
		betslipStore.follow(props.data)
	} else {
		betslipStore.select(props.data as BetslipItemType)
	}
}

const isComboEnabled = computed(() => {
	if (betslipStore.tab === BetslipTab.Combo && props.data.type === BettingMethod.single) {
		const item = props.data as BetslipItemType
		if (betslipStore.combo?.disableIds?.indexOf(item.id) !== -1) {
			return false
		}
		const selection = matchStore.getSelection(item.eventId, item.marketId, item.id)
		if (selection && selection.trueOdds >= bettingConfigStore.comboBonusMinTrueOdds) {
			return true
		}
	}
	return false
})

watch(
	odds,
	(val) => {
		if (val) {
			props.data.trueOdds = +val
		}
	},
	{
		immediate: true
	}
)

watch(
	isLock,
	(val) => {
		if (val && props.data.status === '') {
			props.data.status = BetslipItemStatus.disabled
		} else if (!val && props.data.status === BetslipItemStatus.disabled) {
			props.data.status = BetslipItemStatus.none
		}
	},
	{
		immediate: true
	}
)
</script>
